<template>
  <div
    v-loading="loading"
    class="container"
    :element-loading-text="loadingText"
  >
    <!-- http://42d74x4037.wocp.fun/task/upload -->
    <el-upload
      class="upload-demo"
      action="http://192.168.137.2:9091/task/upload"
      :data="sessionId1"
      :on-preview="handlePreview"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      :on-error="handleError"
      :limit="1"
      :file-list="fileList"
      :auto-upload="false"
      ref="upload"
    >
      <el-button slot="trigger" size="small" type="success">选择文件</el-button>
      <el-button size="small" type="primary" @click="submitFile"
        >点击上传</el-button
      >
      <el-progress
        v-if="isShow"
        :percentage="percentage"
        ref="progress"
      ></el-progress>
      <!-- <el-progress v-if="true" :text-inside="true" :stroke-width="10" :percentage="percentage" status="success"></el-progress> -->
    </el-upload>
    <div class="content">
      <div class="content_title">
        <el-table :data="PCAP" stripe>
          <el-table-column prop="dstIP" label="dstIP"> </el-table-column>
          <el-table-column prop="dstMAC" label="dstMAC"> </el-table-column>
          <el-table-column prop="dstPort" label="dstPort"> </el-table-column>
          <el-table-column prop="frameLength" label="frameLength">
          </el-table-column>
          <el-table-column prop="ipType" label="ipType"> </el-table-column>
          <el-table-column prop="rmse" label="rmse"> </el-table-column>
          <el-table-column prop="srcIP" label="srcIP"> </el-table-column>
          <el-table-column prop="srcMAC" label="srcMAC"> </el-table-column>
          <el-table-column prop="srcPort" label="srcPort"> </el-table-column>
          <el-table-column prop="timestamp" label="timestamp">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      fileList: [],
      loading: false,
      isShow: false,
      percentage: 0,
      flag: 0,
      loadingText: "",
      textarea: "",
      progressStatus: "",
      sessionId1: {
        sessionId: "",
      },
    };
  },
  watch: {
    percentage: {
      handler(newData, oldData) {
        if (newData == 100) {
          this.progressStatus = "success";
          this.$message.success("文件处理完成");
        }
      },
    },
    PCAP: {
      handler(newData, oldData) {
        this.textarea = newData;
      },
      deep: true,
    },
  },
  mounted() {
    setTimeout(() => {
      this.sessionId1.sessionId = this.sessionId;
      console.log(this.sessionId1.sessionId + "---");
    }, 200);
  },
  computed: {
    ...mapState(["PCAP", "sessionId"]),
  },
  beforeDestroy() {
    this.$http({
      method: "GET",
      url: `/task/removeSessionIdFromPcapSet/${this.sessionId}`,
    });
  },
  methods: {
    handlePreview(file) {
      console.log(file);
    },
    beforeUpload(file) {
      // if(file.name.slice(-1,-4))
      var name = file.name.slice(-4);
      if (name != "pcap") {
        this.$message.error("请选择正确格式的文件");
        return false;
      }
    },
    handleSuccess() {
      this.$message.success("文件上传成功");
      this.$refs.upload.clearFiles();
      this.loadingText = "AI正在处理文件";
      this.loading = true;
      var jishiqi = setInterval(() => {
        this.$http({
          method: "GET",
          url: "/task/refresh",
        }).then((res) => {
          if (res.data.data.process != "-1") {
            clearInterval(jishiqi);
            this.loading = false;
            this.isShow = true;
            this.flag = 1;
          }
        });
      }, 1000);
      var jishiqi2 = setInterval(() => {
        this.$http({
          method: "GET",
          url: "/task/refresh",
        }).then((res) => {
          if (res.data.data.process == "-1" && this.flag == 1) {
            clearInterval(jishiqi2);
            this.percentage = 100;
          } else {
            if (res.data.data.process != "-1") {
              this.percentage = res.data.data.process * 100;
            }
          }
        });
      }, 1000);
    },
    handleError() {
      this.$message.error("文件上传失败");
    },
    submitFile() {
      this.$refs.upload.submit();
      this.loading = true;
      this.loadingText = "AI正在接收文件";
      this.isShow = false;
      this.percentage = 0;
      this.progressStatus = "";
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  width: 100%;
}
.content {
  box-shadow: 0 0 10px #dee1e6;
  margin: 30px 0;
  padding: 20px;
  font-size: 12px;
  .content_title {
    font-size: 14px;
    margin-left: 5px;
  }
  .inputBox {
    margin: 20px 0;
    .boxItem {
      // display: flex;
      // justify-content: space-around;
      margin: 10px 0;
      span {
        display: inline-block;
        width: 30%;
        text-align: right;
        margin-right: 10px;
      }
    }
    .btnBox {
      display: flex;
      justify-content: flex-end;
      margin-right: 50px;
    }
  }
  .action_head {
    span {
      margin-right: 20px;
    }
  }
  .progress {
    width: 20%;
    margin-top: 20px;
  }
  header {
    margin-top: 40px;
  }
  .textArea {
    padding: 10px;
    margin-bottom: 20px;
    textarea {
      width: 100%;
      resize: none;
    }
    .buttonBox {
      float: right;
      margin: 30px 0;
    }
  }
}
</style>